<template>
  <view class="modal">
    <view class="modal-mask" @click="handleClose"></view>
    <view class="modal-content">
      <!-- 弹窗标题 -->
      <view class="modal-header">
        <view class="modal-title">
          <text class="modal-title-text">商品卖出</text>
          <text class="modal-subtitle">填写销售信息</text>
        </view>
        <button class="close-button" @click="handleClose">
          <text class="icon icon-close"></text>
        </button>
      </view>

      <!-- 商品信息 -->
      <view class="goods-info">
        <view class="goods-brief">
          <image :src="goods.image" class="goods-thumb"/>
          <view class="goods-detail">
            <text class="goods-name">{{ goods.name }}</text>
            <text class="goods-id">商品编号：{{ goods.sku }}</text>
            <view class="stock-info">
              <text class="stock-tag">当前库存：{{ goods.stock }}件</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 卖出表单 -->
      <uni-forms ref="formRef" :modelValue="formData" :rules="rules" label-position="top">
        <!-- 卖出数量 -->
        <uni-forms-item label="卖出数量" required name="quantity">
          <uni-number-box 
            v-model="formData.quantity"
            :min="1"
            :max="goods.stock"
            @change="handleQuantityChange"
          />
        </uni-forms-item>

        <!-- 卖出单价 -->
        <uni-forms-item label="卖出单价" required name="price">
          <uni-easyinput
            v-model="formData.price"
            type="digit"
            prefixIcon="rmb"
            placeholder="请输入卖出单价"
          />
        </uni-forms-item>

        <!-- 总金额展示 -->
        <view class="total-amount">
          <view class="amount-row">
            <text class="amount-label">销售总额</text>
            <text class="amount-value">¥{{ totalAmount }}</text>
          </view>
        </view>

        <!-- 备注信息 -->
        <uni-forms-item label="备注信息" name="remark">
          <uni-easyinput
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入备注信息（选填）"
            :maxlength="200"
          />
        </uni-forms-item>
      </uni-forms>

      <!-- 底部按钮 -->
      <view class="modal-footer">
        <view class="button-group">
          <button class="button button-cancel" @click="handleClose">取消</button>
          <button class="button button-success" @click="handleConfirm">确认卖出</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  goods: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close', 'confirm'])
const formRef = ref(null)

// 表单数据
const formData = ref({
  quantity: 1,
  price: props.goods.price,
  remark: ''
})

// 表单校验规则
const rules = {
  quantity: {
    rules: [{
      required: true,
      errorMessage: '请输入卖出数量'
    }, {
      validateFunction: (rule, value, data, callback) => {
        if (value > props.goods.stock) {
          callback('超出可用库存')
        }
        return true
      }
    }]
  },
  price: {
    rules: [{
      required: true,
      errorMessage: '请输入卖出单价'
    }, {
      validateFunction: (rule, value, data, callback) => {
        if (value <= 0) {
          callback('卖出单价必须大于0')
        }
        return true
      }
    }]
  }
}

// 计算总金额
const totalAmount = computed(() => {
  return (formData.value.quantity * formData.value.price).toFixed(2)
})

// 数量变化
const handleQuantityChange = (value) => {
  formData.value.quantity = value
}

// 关闭弹窗
const handleClose = () => {
  emit('close')
}

// 确认卖出
const handleConfirm = async () => {
  try {
    // 表单校验
    await formRef.value.validate()
    
    emit('confirm', {
      goodsId: props.goods.id,
      quantity: formData.value.quantity,
      price: formData.value.price,
      totalAmount: totalAmount.value,
      remark: formData.value.remark
    })
  } catch (err) {
    console.log('表单校验失败', err)
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  z-index: 1;
  width: 85%;
  max-width: 320px;
}

.modal-header {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid #E2E8F0;
}

.modal-title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1E293B;
}

.modal-subtitle {
  font-size: 24rpx;
  color: #64748B;
  margin-top: 4rpx;
  display: block;
}

.close-button {
  padding: 16rpx;
  background: none;
  border: none;
  border-radius: 12rpx;
  color: #94A3B8;
  transition: background-color 0.3s;
}

.close-button:active {
  background-color: #F1F5F9;
}

.goods-info {
  padding: 32rpx;
  background-color: #F0FDF4;
}

.goods-brief {
  display: flex;
  align-items: center;
}

.goods-thumb {
  width: 128rpx;
  height: 128rpx;
  border-radius: 12rpx;
}

.goods-detail {
  margin-left: 24rpx;
  flex: 1;
}

.goods-name {
  font-weight: 600;
  color: #1E293B;
}

.goods-id {
  font-size: 24rpx;
  color: #64748B;
  margin-top: 8rpx;
  display: block;
}

.stock-info {
  margin-top: 8rpx;
}

.stock-tag {
  font-size: 24rpx;
  background-color: #FEE2E2;
  color: #DC2626;
  padding: 4rpx 16rpx;
  border-radius: 999rpx;
}

.uni-forms-item {
  margin-bottom: 24rpx;
  padding: 0 32rpx;
}

.uni-forms-item__label {
  font-size: 28rpx;
  font-weight: 500;
  color: #1E293B;
}

.total-amount {
  margin: 24rpx 32rpx;
  background-color: #F8FAFC;
  border-radius: 12rpx;
  padding: 32rpx;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-label {
  color: #64748B;
}

.amount-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #16A34A;
}

.modal-footer {
  padding: 24rpx 32rpx;
  background-color: #F8FAFC;
  border-radius: 0 0 20rpx 20rpx;
}

.button-group {
  display: flex;
  gap: 16rpx;
}

.button {
  flex: 1;
  height: 72rpx;
  border: none;
  border-radius: 36rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-cancel {
  background-color: #E2E8F0;
  color: #475569;
}

.button-cancel:active {
  background-color: #CBD5E1;
}

.button-success {
  background-color: #16A34A;
  color: #FFFFFF;
}

.button-success:active {
  background-color: #15803D;
}
</style> 